<template>
  <header class="header">
    <h1>what iF...</h1>
    <input id="toggle-all" v-model="isAll" class="toggle-all" type="checkbox" >
    <label for="toggle-all"></label>
    <input
      class="new-todo"
      v-model.trim="task"
      placeholder="输入任务名称-回车确认"
      autofocus
      @keyup.enter="addFn"
    />
  </header>
</template>

<script>
export default {
  props:["arr"],
 data(){
 return{
    task:''
 }
 },
 methods:{
    addFn(){
        //子传父
        //非空判断
        if(!this.task){
            alert('任务名不能为空')
            return
        }
        //子传父，申请增加数据
        this.$emit('addTask',this.task)
        //清空内容栏
        this.task=''
    }
 },
 computed:{
  isAll: {
      //2.0.6 计算属性里的set方法，拿到全选框状态然后赋给数组里面每个对象的c属性
      set(bool) {//读取计算属性
        //2.0.7循环数组，将全选状态同步给小选框
        //2.0.8遍历数据数组，赋给所有小选框v-model关联的属性
        this.arr.forEach((item) => {
          item.isDone = bool;
        });
      },
      get() {//更新属性
        //2.0.9 使用every方法遍历数组，如果item.c都会true则返回true
        //2.0.10 小选框都选中时返回一个ture的值给全选的框，使它选中
        return this.arr.every((item) => {
          return item.isDone === true;
        });
      },
    },
 },
}
</script>